<template>


  <el-form :model="form" label-width="120" label-position="right">
    <el-row>
      <el-col :span="12">
        <el-form-item label="上级菜单">
          <el-tree-select
              v-model="form.parentId"
              :data="menuList"
              node-key="menuId"
              :render-after-expand="false"
              style="width: 540px"
              :check-strictly="true"
              :props="{
                label:'menuName'
              }"
              placeholder="请选择父菜单"
          >
          </el-tree-select>

        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="菜单名称">
          <el-input v-model="form.menuName" placeholder="菜单名称"/>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="显示顺序">
          <el-input v-model="form.orderNum" placeholder="显示顺序"/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="路由地址">
          <el-input v-model="form.path" placeholder="路由地址"/>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="组件路径">
          <el-input v-model="form.component" placeholder="组件路径"/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="路由参数">
          <el-input v-model="form.query" placeholder="路由参数"/>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="路由名称">
          <el-input v-model="form.routeName" placeholder="路由名称"/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="是否为外链">
          <el-radio-group v-model="form.isFrame" placeholder="是否为外链">
            <el-radio-button value="0">是</el-radio-button>
            <el-radio-button value="1">否</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="是否缓存">
          <el-radio-group v-model="form.isCache" placeholder="是否缓存">
            <el-radio value="0">缓存</el-radio>
            <el-radio value="1">不缓存</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="菜单类型">
          <el-radio-group v-model="form.menuType" placeholder="菜单类型">
            <el-radio value="M">目录</el-radio>
            <el-radio value="C">菜单</el-radio>
            <el-radio value="F">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="菜单状态">
          <el-radio-group v-model="form.visible">
            <el-radio value="0">显示</el-radio>
            <el-radio value="1">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="菜单状态">
          <el-radio-group v-model="form.status">
            <el-radio value="0">正常</el-radio>
            <el-radio value="1">停用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="权限标识">
          <el-input v-model="form.perms" placeholder="权限标识"/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="菜单图标">
          <el-input v-model="form.icon" placeholder="菜单图标"/>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="备注">
          <el-input v-model="form.remark" placeholder="备注"/>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">保存</el-button>
      <el-button @click="cancle">取消</el-button>
    </el-form-item>
  </el-form>

</template>

<script setup name='edit'>
import {onMounted, ref} from "vue";
import {ElNotification} from 'element-plus'

//用于保存的API
import {getById, saveOrUpdate,} from '@/api/permission/menu/index'


//列表页传递的属性 
//closeDialog 用于关闭dialog 
// editId 编辑的id
const {closeDialog, editId, allMenus, parentId} = defineProps(['closeDialog', 'editId', 'allMenus', 'parentId'])


//表单数据
const form = ref({
  menuName: '',
  parentId: 0
})


const menuList = [{
  "menuId": 0,
  "menuName": "一级菜单",
  children: allMenus
}]


//保存按钮 点击事件
const onSubmit = () => {
  saveOrUpdate(form.value).then(success => {
    ElNotification({
      title: '消息',
      type: 'success',
      message: "保存成功",
    })

    //调用父组件中的 函数用于关闭 dialog 和更新查询结果
    closeDialog(true)
  })
}

const cancle = () => {
  //调用父组件中的 函数用于关闭 dialog 和更新查询结果
  closeDialog(false)
}


// 当修改操作的到时候 根据主键查询
function pageGetById() {

  getById(editId).then(user => {
    form.value = user
  })

}


onMounted(() => {

  //如果修改
  if (editId) {
    pageGetById()
  } else {
    console.log("parentId", parentId)
    form.value.parentId = parentId
  }


})


</script>

<style scoped></style>